<template>
  <div class="wrap">
    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in res.swiper" :key="item.id">
          <img :src="`https://ss.lanqb.com/${item.picture}`" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 5个小图标 -->
    <div class="submenu">
      <div class="menus">
        <img src="@assets/bannerFive/h-submenu01.png" alt="" class="m-pic" />
        <p class="m-tit">免费教程</p>
      </div>
      <div class="menus">
        <img src="@assets/bannerFive/h-submenu04.png" alt="" class="m-pic" />
        <p class="m-tit">教程兑换</p>
      </div>
      <div class="menus">
        <img
          src="./../assets/bannerFive/h-submenu15.png"
          alt=""
          class="m-pic"
        />
        <p class="m-tit">大触来了</p>
      </div>
      <div class="menus">
        <img
          src="./../assets/bannerFive/h-submenu20.png"
          alt=""
          class="m-pic"
        />
        <p class="m-tit">学员作品</p>
      </div>
      <div class="menus">
        <img
          src="./../assets/bannerFive/h-submenu16.png"
          alt=""
          class="m-pic"
        />
        <p class="m-tit">每日一画</p>
      </div>
    </div>
    <!-- 空白一条缝隙  首页公用 -->
    <div class="blanks"></div>
    <!-- 每一栏标题  首页公用 -->
    <div class="commonTitle">
      <p>大触直播</p>
      <p>查看更多&gt;</p>
    </div>
    <!-- 大触直播 -->
    <div class="daniu">
      <div class="daniuCons" v-for="item in res.live" :key="item.id">
        <div class="d-info">
          <img :src="`https://ss.lanqb.com/${item.profile.avatar}`" alt="" />
          <p class="avatar">{{ item.profile.nickname }}</p>
        </div>
        <p class="d-tit">{{ item.production.title }}</p>
        <div class="player">
          <div class="p-bf" v-if="item.id == 617"></div>
          <div class="player" v-else>
            <img
              :src="`https://ss.lanqb.com/${item.production.cover}`"
              alt=""
              class="p-bf"
            />
          </div>
          <!-- 
             style="background-image: url(`https://ss.lanqb.com/${{item.production.cover}}`);"
          /> -->
        </div>
        <p class="periods">第{{ item.periods }}期</p>
        <h4 v-if="item.id == 617">即将直播</h4>
        <div class="courseDate">
          <p class="begin">时间: {{ item.begin_at }}</p>
          <p class="like" v-if="item.id == 617">
            {{ item.statistic.purchases }}人感兴趣
          </p>
          <div class="like" v-else>
            <p class="c-icon"><van-icon name="like-o" /></p>
            <p class="likeData">
              {{ item.statistic.base_interested }}
            </p>
          </div>
        </div>
      </div>
      <!-- 大触直播里面只截取一个对象 -->
      <div class="course" v-if="res.daniu.course">
        <div class="courseInfo">
          <img
            :src="`https://ss.lanqb.com/${res.daniu.course.data[0].user_profile.avatar}`"
            alt=""
            class="avatar"
          />
          <p class="nickname">
            {{ res.daniu.course.data[0].user_profile.nickname }}
          </p>
        </div>
        <p class="c-tit">{{ res.daniu.course.data[0].title }}</p>
        <div class="course-cover">
          <img
            :src="`https://ss.lanqb.com/${res.daniu.course.data[0].posters.mobile}`"
            alt=""
          />
        </div>
        <div class="c-time">
          <p class="begin">时间: {{ res.daniu.course.data[0].begin_at }}</p>
        </div>
        <div class="c-like">
          <p class="c-icon"><van-icon name="like-o" /></p>
          <p class="likeData">
            {{ res.daniu.course.data[0].statistic.base_interested }}
          </p>
        </div>
      </div>
      <div class="clear" style="clear: both; padding-top: 5px"></div>
    </div>
    <!-- 热门教程 -->
    <!-- 空白一条缝隙  首页公用 -->
    <div class="blanks"></div>
    <!-- 每一栏标题  首页公用 -->
    <div class="commonTitle">
      <p>热门教程</p>
      <p>查看更多&gt;</p>
    </div>
    <div class="hotsBox">
      <div class="hots" v-for="item in res.hots" :key="item.id">
        <div class="list">
          <img :src="`https://ss.lanqb.com/${item.posters.mobile}`" alt="" />
          <p class="h-tit">{{ item.title }}</p>
        </div>
      </div>
    </div>
    <!-- 图文教程 -->
    <!-- 空白一条缝隙  首页公用 -->
    <div class="blanks"></div>
    <!-- 每一栏标题  首页公用 -->
    <div class="commonTitle">
      <p>图文教程</p>
      <p>查看更多&gt;</p>
    </div>
    <div class="imageBox">
      <div class="imagesList" v-for="item in res.imageText" :key="item.id">
        <div class="i-list">
          <img :src="`https://ss.lanqb.com/${item.imgCover}`" alt="" />
          <div class="i-text">
            <p class="i-tit">{{ item.title }}</p>
            <p class="i-users">老师:{{ item.user_profile.nickname }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐咨询 -->
    <!-- 空白一条缝隙  首页公用 -->
    <div class="blanks"></div>
    <!-- 每一栏标题  首页公用 -->
    <div class="commonTitle">
      <p>推荐咨询</p>
      <p>查看更多&gt;</p>
    </div>
    <div class="imageBox">
      <div class="imagesList" v-for="item in res.news" :key="item.id">
        <p class="i-logo">{{ item.category.category_name }}</p>
        <div class="i-list">
          <img :src="`https://ss.lanqb.com/${item.imgCover}`" alt="" />
          <div class="i-text">
            <p class="i-tit">{{ item.title }}</p>
            <p class="i-users">
              {{
                item.created_at
                  .slice(0, 10)
                  .replace("-", "年")
                  .replace("-", "月")
                  .concat("日")
              }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部版权信息 -->
    <div class="about">
      <p class="a-info">| 关于蓝铅笔 |</p>
      <div class="credible">
        <a
          href="https://xinyong.yunaq.com/certificate?site=www.lanqb.com&at=realname"
          target="_blank"
        >
          <img
            src="https://assets-cdn.lanqb.com/image/footer/footer-icon1_124x47.png"
            alt=""
            style="width: 51px; height: 19px"
          />
        </a>
        <span>
          <img
            src="	https://assets-cdn.lanqb.com/image/footer/footer-icon5@2x.png"
            alt=""
            style="width: 51px; height: 19px"
          />
        </span>
        <a
          href="https://assets-cdn.lanqb.com/image/footer/lab%E5%AE%9E%E5%90%8D%E5%AE%98%E7%BD%91%E8%AE%A4%E8%AF%81.pdf"
          target="_blank"
        >
          <img
            src="https://assets-cdn.lanqb.com/image/footer/footer-icon2@2x.png"
            alt=""
            style="width: 51px; height: 19px"
          />
        </a>
        <a href="http://www.innocom.gov.cn/" target="_blank">
          <img
            src="	https://assets-cdn.lanqb.com/image/footer/footer-icon3@2x.png"
            alt=""
            style="width: 51px; height: 19px"
          />
        </a>
        <a
          href="https://xyt.xcc.cn/getpcInfo?sn=1559097290247876608&language=CN&certType=8&url=*.lanqb.com"
          target="_blank"
        >
          <img
            src="https://xyt.xcc.cn/img/icon/icon8.png"
            alt=""
            style="width: 51px; height: 19px"
          />
        </a>
      </div>
      <div class="copyright">
        <span>Copyright © 2022杭州多技教育科技有限公司</span>
        <a
          href="http://zj.beian.miit.gov.cn/publish/query/indexFirst.action"
          target="_blank"
          >浙ICP备11056181号</a
        >
      </div>
      <div class="network">
        <a
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010602000717"
          target="_blank"
        >
          <img
            src="	https://assets-cdn.lanqb.com/image/footer/footer-icon4@2x.png"
            alt=""
            style="width: 10px; height: 10px; margin-right: 5px"
          />浙公网安备33010602000717号
        </a>
      </div>
    </div>
  </div>
</template>

<script setup>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
// export default {
//   name: "HomeView",
//   components: {},
// };
import { getCurrentInstance, reactive } from "vue";
const { $axios, $request } =
  getCurrentInstance().appContext.config.globalProperties;

const res = reactive({
  swiper: [], // 轮播图
  daniu: [], // 大触直播
  live: [], // 大触直播(live请求)
  hots: [], // 热门教程
  imageText: [], // 图文教程
  news: [], // 推荐咨询
});
// 轮播图   https://m.lanqb.com/api/home/banner?type=m&local_code=10&order=weight&limit=6 解构一下data 就不用data.data的赋值了
$axios(
  `/lanqb/api/home/banner?type=m&local_code=10&order=weight&limit=6`,
  "GET"
).then(({ data }) => {
  // console.log(data);
  res.swiper = data.data; // 轮播图
  // console.log(res.swiper);
});
// 大触直播   https://m.lanqb.com/api/daniu?link=paging&live=3&is_live=1&limit=3&page=1  解构一下data 就不用data.data的赋值了
$axios(`/lanqb/api/daniu?link=paging&live=3&is_live=1&limit=3&page=1`).then(
  ({ data }) => {
    // console.log(data.course.data);
    res.daniu = data;
    // console.log(res.daniu);
    res.live = data.live;
    // console.log(res.live);
  }
);
// 热门教程   https://m.lanqb.com/api/home/series  解构一下data  就不用data.data的赋值了
$axios(`/lanqb/api/home/series`, "GET").then(({ data }) => {
  res.hots = data.slice(0, 4);
  // console.log(res.hots);
});
// 图文教程   https://m.lanqb.com/api/home/graphic-tutorials
$request(`/lanqb/api/home/graphic-tutorials`, "get").then((data) => {
  res.imageText = data.slice(0, 4);
  // console.log(res.imageText);
});
// 推荐咨询  https://m.lanqb.com/api/home/news
$request(`/lanqb/api/home/news`, "GET").then((data) => {
  res.news = data;
  // console.log(res.news);
});
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}

.wrap {
  height: calc(100vh - 40px - 44px - 50px);
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  // 轮播图
  .my-swipe .van-swipe-item {
    height: 150px;
    img {
      display: block;
      height: 150px;
    }
  }
  // 5个小图标
  .submenu {
    height: 96px;
    background-color: antiquewhite;
    padding: 17px 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .menus {
      .m-pic {
        width: 43px;
        height: 43px;
        border-radius: 50%;
      }
      .m-tit {
        font-size: 12px;
      }
    }
  }
  // 空白一条缝隙  首页公用
  .blanks {
    height: 10px;
    background-color: #eee;
  }
  // 每一栏标题  首页公用
  .commonTitle {
    height: 34px;
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p:nth-child(1) {
      font-size: 14px;
      color: #222222;
    }
    p:nth-child(2) {
      font-size: 12px;
      color: #a4a4a4;
    }
  }
  // 大触直播
  .daniu {
    margin-top: 25px;
    .daniuCons {
      height: 268px;
      width: 92vw;
      position: relative;
      margin: 0 auto;
      .d-info {
        padding-top: 5px;
        display: flex;
        img {
          width: 17px;
          height: 17px;
          border-radius: 50%;
        }
        .avatar {
          margin-left: 10px;
          font-size: 12px;
        }
      }
      .d-tit {
        margin: 5px 0;
        font-size: 13px;
        color: #222222;
        font-weight: bold;
      }
      .player {
        .p-bf {
          width: 325px;
          height: 180px;
          border-radius: 5px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center center;
          text-align: left;
          background-image: url(https://img.videocc.net/uimage/8/81327783a8/first_image/28a0e4e1-4fa6-4eee-b861-a356c89a1248_b.jpg);
        }
      }
      .periods {
        position: absolute;
        top: 72px;
        right: 15px;
        width: 52px;
        height: 18px;
        border-radius: 3px;
        line-height: 18px;
        text-align: center;
        color: #ffffff;
        font-size: 12px;
        background-color: rgba(0, 0, 0, 0.4);
      }
      &:nth-child(1) {
        height: 268px;
        padding: 0 10px;
        border-radius: 5px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        box-shadow: 2px 2px 10px 1px #ccc;
        position: relative;
        .courseDate {
          margin-top: 5px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .begin {
            color: #a4a4a4;
            font-size: 12px;
          }
          .like {
            color: #a4a4a4;
            font-size: 12px;
          }
        }
        .periods {
          position: absolute;
          top: 55px;
        }
        h4 {
          position: absolute;
          top: 50px;
          left: 10px;
          width: 62px;
          height: 18px;
          border-radius: 5px 0 0 0;
          background-color: #ff3f72;
          padding: 0 5px;
          color: #ffffff;
          font-size: 12px;
          box-sizing: border-box;
        }
      }
      &:nth-child(2) {
        margin-top: 10px;
        width: 45vw;
        height: 228px;
        float: left;
        margin-left: 15px;
        padding: 0 10px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        box-shadow: 2px 2px 10px 1px #ccc;
        .player {
          .p-bf {
            width: 147px;
            height: 110px;
            border-radius: 5px;
          }
        }
        .courseDate {
          .begin {
            width: 100%;
            font-size: 12px;
            color: #a4a4a4;
          }
          .like {
            margin-top: 5px;
            display: flex;
            align-items: center;
            .likeData {
              font-size: 12px;
              color: #a4a4a4;
            }
            .c-icon {
              font-size: 12px;
              margin-right: 5px;
              color: #a4a4a4;
            }
          }
        }
      }
    }
    // 大触直播里面只截取一个对象
    .course {
      margin-top: 10px;
      width: 45vw;
      height: 228px;
      float: right;
      margin-right: 15px;
      // background-color: antiquewhite;
      padding: 0 10px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      box-shadow: 2px 2px 10px 1px #ccc;
      .courseInfo {
        display: flex;
        padding-top: 5px;
        .nickname {
          font-size: 12px;
          margin-left: 5px;
        }
        .avatar {
          width: 17px;
          height: 17px;
          border-radius: 50%;
        }
      }
      .c-tit {
        margin: 5px 0;
        font-size: 13px;
        color: #222222;
        font-weight: bold;
      }
      .course-cover {
        img {
          width: 147px;
          height: 110px;
          border-radius: 5px;
        }
      }
      .c-time {
        .begin {
          font-size: 12px;
          color: #a4a4a4;
        }
      }
      .c-like {
        margin-top: 5px;
        display: flex;
        align-items: center;
        .c-icon {
          font-size: 12px;
          margin-right: 5px;
          color: #a4a4a4;
        }
        .likeData {
          font-size: 12px;
          color: #a4a4a4;
        }
      }
    }
  }
  // 热门教程
  .hotsBox {
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .hots {
      width: 45vw;
      margin-top: 10px;
      .list {
        padding-bottom: 10px;
        img {
          width: 171px;
          height: 129px;
        }
        .h-tit {
          color: #222222;
          font-size: 12px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
  }
  // 图文教程  推荐咨询
  .imageBox {
    padding: 0 10px;
    .imagesList {
      border-bottom: 1px solid #ccc;
      position: relative;
      .i-logo {
        width: 56px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        font-size: 12px;
        color: #ffffff;
        background-color: #ffa323;
        position: absolute;
        top: 10px;
        left: 5px;
      }
      .i-list {
        display: flex;
        padding: 10px 0;
        img {
          width: 115px;
          height: 86px;
        }
        .i-text {
          margin-left: 15px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .i-tit {
            color: #222222;
            font-size: 14px;
          }
          .i-users {
            color: #a4a4a4;
            font-size: 13px;
          }
        }
      }
    }
  }
  // 底部版权信息
  .about {
    width: 100vw;
    height: 100px;
    background-color: #eee;
    .a-info {
      text-align: center;
      font-size: 12px;
      color: #a4a4a4;
      padding: 10px 0;
    }
    .credible {
      padding: 0 25px;
      display: flex;
      justify-content: space-between;
    }
    .copyright {
      text-align: center;
      span {
        font-size: 12px;
        color: #a4a4a4;
      }
      a {
        font-size: 12px;
        color: #a4a4a4;
      }
    }
    .network {
      text-align: center;
      a {
        font-size: 12px;
        color: #a4a4a4;
      }
    }
  }
}
</style>
